<template>
  <div class="login">
    <el-card class="login_card">
      <template #header>
        <div class="df jc-sb ai-c">
          <span>个人博客管理登录</span>
          <span class="back" @click="goBack">时间倒流</span>
        </div>
      </template>
      <el-form ref="formRef" :model="model" :rules="rules" label-placement="top">
        <el-form-item label="用户名" label-width="70" prop="username">
          <el-input v-model="model.username" required placeholder="测试用户test，仅查看权限" />
        </el-form-item>
        <el-form-item label="密  码" label-width="70" prop="password">
          <el-input
            v-model="model.password"
            required
            type="password"
            placeholder="测试用户密码123456" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="footer">
          <el-checkbox v-model="model.rember" label="记住我"></el-checkbox>
          <div class="footer-el">
            <!-- <el-button @click="goRegister">注册</el-button> -->
            <el-button type="primary" @click="loginFun(formRef)">登录</el-button>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/stores/userStore';
  import { useCasualUser } from '@/stores/casualUserStore';
  import type { IUser } from '@/apis/type';
  import { login } from '@/apis/login';
  import type { FormInstance } from 'element-plus';
  const rules = reactive({
    username: [
      {
        required: true,
        trigger: 'blur',
        message: '请输入用户名'
      },
      {
        min: 2,
        max: 20,
        message: '用户名长度在5到20个字符',
        trigger: 'blur'
      }
    ],
    password: [
      {
        required: true,
        trigger: 'blur',
        message: '请输入密码'
      },
      {
        min: 6,
        max: 20,
        message: '密码长度在5到20个字符',
        trigger: 'blur'
      }
    ]
  });
  const formRef = ref<FormInstance>();
  const model = reactive({
    username: '',
    password: '',
    rember: false
  } as IUser);
  const userStore = useUserStore();
  const { username, rember, password } = userStore.getUser();
  if (rember) {
    model.rember = rember;
    model.password = password;
    model.username = username;
  }
  const $router = useRouter();
  const loginFun = async (formRef: FormInstance | undefined) => {
    if (!formRef) return;
    await formRef.validate(async valid => {
      if (valid) {
        let res = await login(model);
        if (res.code == 200) {
          ElMessage.success(res.msg);
          res.data.password = model.password;
          res.data.rember = model.rember;
          userStore.setUser(res.data);
          // 清除临时用户缓存
          useCasualUser().removeCasualUser();
          $router.push({ name: 'list', query: { index: 1 } });
        }
      }
    });
  };
  const goRegister = () => {
    ElMessage.error('去注册吧');
  };
  const goBack = () => {
    $router.back();
  };
</script>

<style lang="scss" scoped>
  .login {
    display: flex;
    width: 100vw;
    height: 100vh;
    color: #000;
    ::v-deep(.el-card__header) {
      border-bottom: 0;
      font-size: 20px;
      padding-bottom: 0;
    }
  }
  .login_card {
    width: 500px;
    max-width: 70%;
    margin: auto;
    background-color: var(--bg-color-deep);
    border: none;

    ::v-deep(.el-form-item:last-child) {
      margin-bottom: 0;
    }
    .back {
      font-size: 15px;
      cursor: pointer;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-el {
    display: flex;
    align-items: center;
  }
</style>
